'use strict'

import React, { Component } from 'react'
import * as helper from '../../utilities/helper'
import * as layout from '../../configs/layout'
import * as color from '../../configs/color'
import Icon from '../../ui/icon/Icon'
import noop from 'lodash/noop'

const containerStyle = {
    width: '100%',
    height: '46px',
    background: color.WHITE,
    paddingLeft: layout.HORIZONTAL_PADDING,
    paddingRight: layout.HORIZONTAL_PADDING
}

const inputStyle = {
    fontSize: '16px',
    color: color.DARK
}

const clearIconStyle = {
    width: '16px',
    color: '#dcdcdc',
    fontSize: '16px'
}

let lazyValidateTimer = null

export default class TextBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: this.props.value,
            isValid: false
        }
        this.reset = this.reset.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.validate = this.validate.bind(this)
        this.lazyValidate = this.lazyValidate.bind(this)
    }

    handleChange(event) {
        let value = event.target.value
        if (value.length >= this.props.maxLength) {
            value = value.substr(0, this.props.maxLength)
        }
        this.setState({value: value})
        this.lazyValidate()
    }

    validate() {
        let pattern = null

        const validateRules = {
            mobile: /1[3|4|5|7|8]\d{9}/,
            text: /\S+/
        }

        const doValidate = () => {
            if (this.props.pattern) {
                pattern = this.props.pattern;
            } else if (this.props.validType) {
                pattern = validateRules[this.props.validType]
                if (!pattern) {
                    throw new Error('non such validate type: ' + this.props.validType)
                }
            }
            return pattern.test(this.state.value)
        }

        this.setState({isValid: doValidate()})
    }

    lazyValidate() {
        clearTimeout(lazyValidateTimer)
        lazyValidateTimer = setTimeout(() => {
            this.validate()
            this.props.onComplete(this.state.value)
            this.props.onChange(this.state.value)
        }, 250)
    }

    reset() {
        this.setState({value: '', isValid: false}, () => {
            this.props.onComplete(this.state.value)
            this.props.onChange(this.state.value)
        })
    }

    render() {
        return (
            <div className="flex-h flex-vc flex-justify" style={helper.combineStyles(containerStyle, {}, '', this.props.style)}>
                <input className="flex1 flex-h flex-end" type={this.props.type}
                       value={this.state.value}
                       name={this.props.name}
                       maxLength={this.props.maxLength}
                       placeholder={this.props.placeholder}
                       onChange={this.handleChange}
                       style={inputStyle}/>
                {this.props.resetAble && this.state.value ? <Icon onClick={this.reset} iconName="cross-fill" style={clearIconStyle}/> : null}
            </div>
        )
    }
}

TextBox.defaultProps = {
    value: '',
    required: false,
    pattern: null,
    maxLength: 20,
    validType: 'text',
    type: 'text',
    onComplete: noop,
    onChange: noop,
    isValid: false
}

TextBox.propTypes = {
    value: React.PropTypes.string,
    isValid: React.PropTypes.bool,
    required: React.PropTypes.bool,
    pattern: React.PropTypes.object,
    type: React.PropTypes.string,
    resetAble: React.PropTypes.bool
}